/**
 * js 生成日历
 */
var date = new Date(); //创建日期对象
var nowYear = date.getFullYear(); //获得当前年份
var nowMonth = date.getMonth() + 1; //获得当前月份
var nowDay = date.getDay(); //当天
var splitString = '-'; //分隔符
var weekDays = new Array('日','一','二','三','四','五','六'); //星期数组
var months = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月');//月份数组
var lastDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //每个月最后一天是几号
console.log("Hello world!");

//  变量保存，存储当前选择的年月
var checkYear = nowYear;
var checkMonth = nowMonth;


//    将选择的日期添加到输入框
function setInput(selectDay) {
    document.getElementById('txt_calendar').value = checkYear + splitString + checkMonth + splitString + selectDay;
}

//显示控件
function showDate() {
    createDate(nowYear,nowMonth); //创建日历
    //显示控制位置
    var x = document.getElementById('txt_calendar').offsetLeft;
    var y = document.getElementById('txt_calendar').offsetTop + 22;
    document.getElementById('dateOuter').style.left = x + "px";
    document.getElementById('dateOuter').style.top = y + "px";
    document.getElementById('dateOuter').style.display = "";
}

/**
 * 拼接日历框,并且定位日历框
 */
//    最外层样式
var outetStyle = 'z-index: 200; display: none;position: absolute;width: 314px;margin-top:10px;border: 1px solid #F7F7F7;border-radius: 5px;background-color: #F7F7F7;color: #4eccc4;padding-bottom: 20px;';
//    日历外层
//     var tempText = '<div style="'+ outetStyle+'" id="dateOuter"></div>';
//     var BOX = document.getElementById("BOX").innerHTML += tempText;
document.write('<div style="'+ outetStyle+'" id="dateOuter"></div>');
//    创建日历样式
function createDate(thisYear,thisMonth) {
    var createDoc = '<div style="height: 30px;">';
    //当前年月日，点击此处日历自动跳到当前日期
    createDoc += '<p style="width: 100%;height: 30px;text-align: center;color: #999;" onclick="getThisDay()">当前日期 ' + nowYear + "年" + nowMonth + "月" + nowDay + "号";
    //关闭日历显示
    createDoc += '<span id="closeDate" onClick="hidDate()" style="float: right;font-size: 25px;margin: -20px 3px 0 0;cursor: pointer;">×</span></p></div>';
    createDoc += '<div style="margin-bottom: 8px;">';

    //上个月
    createDoc += '<span id="lastMonth" onclick="lastMonthClick()" style="margin: 0 20px 0 25px;cursor:pointer;"><</span>';
    //创建年份下拉框[1900-2099]年
    createDoc += '<select id ="selectYear" class="selectStyle" onchange="changeYearAndMonth()">';
    for(var i = 1900; i <= 2099; i++) {
        createDoc += "<option value=" + i + ">" + i + "</option>";
    }
    createDoc += "</select>年";
    //创建月份下拉框
    createDoc += '<select id ="selectMonth" class="selectStyle" onchange="changeYearAndMonth()">';
    for(var i = 1; i <= 12; i++) {
        createDoc += "<option value=" + i + ">" + i + "</option>";
    }
    createDoc += "</select>月";
    //下一月
    createDoc += '<span id="nextMonth" onClick="nextMonthClick()" style="float: right;margin-right: 25px;cursor:pointer;">></span></div>';
    //创建星期
    createDoc += '<div class="everyWeekDay">';
    for(var i = 0; i < weekDays.length; i++) {
        if(weekDays[i] == "日" || weekDays[i] == "六") {
            createDoc += '<span class="weekday" style="color:red;">' + weekDays[i] + '</span>'
        } else {
            createDoc += '<span class="weekday">' + weekDays[i] + '</span>'
        }
    }
    createDoc += '</div>';
    // 创建每天天数
    createDoc += '<div class="everyDay"><div class="marginTop">'; //日期样式DIV
    var thisWeek = getThisWeekDay(thisYear, thisMonth, 1); //算出当前年月1号是星期几
    /*
 * 如果当前不是星期天,创建空白日期占位
 * 若是星期天，则循环输出当月天数
 * 待修改优化，后期改为变色的前一个月日期
 */
    if(thisWeek != 0) {
        for(var i = 0; i < thisWeek; i++) {
            createDoc += '<span class="days"></span>';
        }
    }

    //循环输出当月天数
    //getThisMonthDay()获取当月天数
    for(var i = 1; i < getThisMonthDay(thisYear, thisMonth) + 1; i++) {
        if (thisYear == nowYear && thisMonth == nowMonth && i == nowDay) {
            if (getThisWeekDay(thisYear, thisMonth, i) == 6 || getThisWeekDay(thisYear, thisMonth, i) == 0) {
                //今天是周末
                createDoc += '<span onclick="setInput(' + i + ')" class="days" style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">' + i + '</span>';
            } else {
                createDoc += '<span onClick="setInput(' + i + ')" class="days" style="background-color:#4eccc4;color:#FFFFFF;cursor:pointer;">' + i + '</span>';
            }
        }else {
            //周末变为红色
            if(getThisWeekDay(thisYear,thisMonth,i)==6 || getThisWeekDay(thisYear,thisMonth,i)==0){
                createDoc+='<span id="weekends" onClick="setInput('+i+')" class="days" onmouseover="mouseOver(this);" onmouseout="mouseOut(this)" style="color:red;cursor:pointer;">'+i+'</span>';
            }else{
                createDoc+='<span onClick="setInput('+i+')" class="days" onmouseover="mouseOver(this);" onmouseout="mouseOut(this)" style="cursor:pointer;">'+i+'</span>';
            }
        }
        //星期六换行
        if(getThisWeekDay(thisYear,thisMonth,i)==6){
            createDoc+="</tr>";
        }
    }
    createDoc += '</div></div>';
    //将创建好的控件字符串添加到div中
    document.getElementById('dateOuter').innerHTML = createDoc;
    //默认选择当前年份
    document.getElementById('selectYear').value = thisYear;
    //默认选择当前月
    document.getElementById('selectMonth').value = thisMonth;
}
//跳转到当前日
function getThisDay(){
    checkYear = nowYear;
    checkMonth = nowMonth;
    createDate(checkYear,checkMonth);
}

//上一个月
function lastMonthClick(){
    //若当前是1月份，年份减一，月份变为12
    if(checkMonth == 1){
        checkYear = checkYear - 1;
        checkMonth = 12;
    }else{
        checkMonth = checkMonth - 1;
    }
    //创建当前月份日期
    createDate(checkYear,checkMonth);
}

//下一月
function nextMonthClick(){
    //若当前是12月份，年份加1，月份变为1
    if(checkMonth == 12){
        checkYear = checkYear + 1;
        checkMonth = 1;
    }else{
        checkMonth = checkMonth + 1;
    }
    //创建当前月份日期
    createDate(checkYear,checkMonth);
}

//年月下拉框
function changeYearAndMonth(){
    checkYear = document.getElementById('selectYear').value;
    checkMonth = document.getElementById('selectMonth').value;
    createDate(checkYear,checkMonth);
}

//判断是否为闰年
function isLeapYear(year) {
    var isLeap = false;
    if(0 == year % 4 && ((year % 100 != 0) || (year % 400 == 0))) {
        //闰年可以被4整除且不能被100整除，或者能整除400
        isLeap = true;
    }
    return isLeap;
}

//获取某月份的总天数
function getThisMonthDay(year, month) {
    var thisDayCount = lastDays[month - 1]; //获取当前月份的天数
    if((month == 2) && isLeapYear(year)) {
        //若当前月份为2月，并且是闰年，天数加1
        thisDayCount++;
    }
    return thisDayCount;
}

//计算某天是星期几
function getThisWeekDay(year, month, date) {
    //将年月日创建Date对象，返回当前星期几
    var thisDate = new Date(year, month - 1, date);
    return thisDate.getDay();
}

//鼠标移进时
function mouseOver(obj){
    if(obj.id == "weekends"){
        //若为周末，边框样式为红色
        obj.style.border="1px solid red";
    }else{
        obj.style.border="1px solid #4eccc4";
    }
}
//鼠标移出时，边框恢复原色
function mouseOut(obj){
    obj.style.border="1px solid #F7F7F7";
}

//关闭日期选择框
function hidDate(){
    document.getElementById('dateOuter').style.display = "none";
}
//控制键盘操作，左右控制月份，空格返回当前日期
document.onkeydown=function(e){
    /*
     * 浏览器兼容性
     * ie的document对象有一个all属性，它的里面存放了页面的所有标签，而其它浏览器是没有的，所以在ie中，事件对象的传播会绑定在全局的windows上，所以ie浏览器肯定是都支持window.event
     * firefox只支持事件对象作为参数传入，而这又恰恰是ie6/ie7/ie8所无法实现的，所以可以成功的区分这两类
     * ie9/chrome/opera/safari，则两种方式都支持
     * var e = event?event||window.event可以保证各浏览器的兼容的
     */
    var thisEvent = e || window.event;
    var keyCode = thisEvent.keyCode || thisEvent.which;
    //若控件是隐藏状态
    if(document.getElementById('dateOuter').style.display == "none"){
        return true;
    }
    switch(keyCode){
        case 32://空格，返回当前日期
            getThisDay();break;
        case 27://Esc，关闭日历插件
            hidDate();break;
        case 37://left，向左
            lastMonthClick();break;
        case 39://right，向右
            nextMonthClick();break;
    }
}
/*模拟windows7日历 鼠标滑轮滚动翻页*/
var direct;
var scrollFunc=function(e){
    //浏览器兼容
    var thisEvent = e || window.event;
    //IE,Opera,Chrome,safari
    if(thisEvent.wheelDelta){
        direct = thisEvent.wheelDelta;
    }
    else if(thisEvent.detail){
        //Firefox
        direct = thisEvent.detail;
    }
    //如果控件是隐藏状态
    if(document.getElementById('dateOuter').style.display == "none"){
        return false;
    }
    /*
     * Firefox 接收 +3 和 -3
     * 其他浏览器接收 +120 和-120
     * 其中+数表示鼠标向上滑动，-数表示向下滑动
    */
    //向上滑动，调用上一个月
    if(direct=="120" || direct=="3"){
        lastMonthClick();
        //向下滑动，调用下一个月
    }else if(direct=="-120" || direct=="-3"){
        nextMonthClick();
    }
};

//注册监听事件
if(document.addEventListener){
    if(myBrowser() == "FF"){
        //Firefox,DOMMouseScroll滚动事件只有Firefox适用
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }else{
        //Chrome,360,safari,Opera适用mousewheel滚动事件
        document.addEventListener('mousewheel',scrollFunc,false);
    }
}else{
    //兼容IE，测试IE8可以兼容
    document.onmousewheel = scrollFunc;
}


//判断浏览器类型
function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
        return "Chrome";
    }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
    if (userAgent.indexOf("Trident") > -1) {
        return "Edge";
    } //判断是否Edge浏览器
}